<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 从根目录下访问vue.js -->
	<script type="text/javascript" src="/js/vue.js"></script>
	<script type="text/javascript">
		Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示。
	</script>
</head>

<!--
	一个组件的 data 选项必须是一个函数，
	因此每个实例可以维护一份被返回对象的独立的拷贝。
	如果 Vue 没有这条规则，
	点击一个按钮就可能会像如下代码一样影响到其它所有实例。
-->

<body>
	<div id="app">
		<button-counter></button-counter>
		<button-counter></button-counter>
		<button-counter></button-counter>
	</div>
</body>

</html>



<script type="text/javascript">
	Vue.component('button-counter', {
		data: {
			count: 0
		},  //我这样写直接报错了，提示data必须为一个方法。
		template: '<button v-on:click="count++">你点击了{{ count }}次</button>'
	})
	new Vue({
		el: "#app",
	})
</script>